{% extends "domain_page.html" %}

{% block extra_media %}
	{{ block.super }}
	<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.tooltip.js"></script>
	<script type="text/javascript" src="{{ STATIC_URL }}js/raphael-min.js"></script>
	<link rel="stylesheet" href="{{ STATIC_URL }}css/jquery.tooltip.css" />
	<script type="text/javascript">
		<!--
		$(document).ready(function() {
			$('.servers-tooltip').tooltip({
				track: true,
				delay: 0,
				showURL: false,
				extraClass: "fixed-width"
			});
			$(".servers-popup a").click(function(event) {
				event.preventDefault();
			});
			$(".servers-popup:has(a)").click(function(event) {
				var a = $(this).find("a");
				var url = a.attr("href");
				var windowName = "response";
				var windowSize = "width=800,height=800,scrollbars=yes";
				var newWindow = window.open(url, windowName, windowSize);
				if (window.focus) {
					newWindow.focus();
				};
			}).each(function() {;
				$(this).css('cursor', 'pointer');
			});

			$('tr.vertical').each(function(){
				var maxwidth = 0;
				var maxheight = 0;
				var buffer = 1;
				var papers = new Array();
				var titles = new Array();
				$(this).children('.vertical').each(function() {
					var title = $(this).html();
					$(this).html('');
					var paper = Raphael($(this).get(0), 0, 0);
					var text = paper.text(0, 0, title).attr({ 'font-size': 14, 'font-weight': 'bold' });
					var dims = text.getBBox();
					var half_width = parseInt(dims['width']/2) + buffer;
					var half_height = parseInt(dims['height']/2) + buffer;
					text.transform('R-90,0,0T'+half_height+',-'+half_width);
					papers.push(paper);
					titles.push(text);
					if (dims['width'] > maxwidth) {
						maxwidth = dims['width'];
					}
					if (dims['height'] > maxheight) {
						maxheight = dims['height'];
					}
				});
				maxheight += buffer*2;
				maxwidth += buffer*2;
				for (var i = 0; i < papers.length; i++) {
					titles[i].transform('...T0,'+maxwidth);
					papers[i].setSize(maxheight, maxwidth);
				}
				$('th.vertical').each(function(){
					$(this).css('width', maxheight).css('height', maxwidth);
				});
			});
		});
		-->

	</script>
{% endblock %}

{% block page_content %}
	<div id="viz">
		<div id="viz-headers">
				<div id="consistency-header">DNS Server Responses</div>
		</div>
		<div id="consistency-region">
		<img alt="Notice" src="{{ STATIC_URL }}images/dnssec_legend/warning.png" /><b>Notice:</b> The features on this page are not yet fully developed but it has been deployed in its infant form to further aid with DNS/DNSSEC troubleshooting.  This page will be updated in due time to make it more useful for troubleshooting.
		{% for cat, servers, matrix in response_consistency %}
				<div class="consistency-matrix">
					<h4>{{ cat }}</h4>
					<table>
						<tr><th rowspan="2">Name</th><th rowspan="2">TTL</th><th rowspan="2">Type</th><th rowspan="2">Data</th><th rowspan="2">Status</th><th colspan="{{ servers|length }}">Returned by</th></tr>
						<tr class="vertical">{% for server in servers %}<th class="vertical servers-tooltip" title="{{ server.1|join:", " }} ({{ server.0 }})">{{ server.1|join:", " }} ({{ server.0 }})</th>{% endfor %}</tr>
						{% for row_grouping in matrix %}
						<!--{% cycle "grouping-1" "grouping-2" as row_class %}-->
						{% for row in row_grouping %}
						{% autoescape off %}
						<tr class="{{ row_class }}">
							{% for col, style, url, tooltip, col_count in row %}<td{% if style or tooltip or url %} class="{% if style %}{{ style }}{% if tooltip or url %} {% endif %}{% endif %}{% if tooltip %}servers-tooltip{% if url %} {% endif %}{% endif %}{% if url %}servers-popup{% endif %}"{% endif %}{% if col_count %} colspan="{{ col_count }}"{% endif %}{% if tooltip %} title="{{ tooltip }}"{% endif %}>{% if url %}<a href="{{ url }}">{% endif %}{{ col }}{% if url %}</a>{% endif %}</td>{% endfor %}
						</tr>
						{% endautoescape %}
						{% endfor %}
						{% endfor %}
					</table>
				</div>
		{% endfor %}
		</div>
	</div>
{% endblock %}
